<template>
    <div class="shopcar-container">
        <div class="goods-list">
            	<div class="mui-card" v-for="(item,index) in goodslist" :key="item.id">
                    <div class="mui-card-content">
                        <div class="mui-card-content-inner">
                           <mt-switch v-model="$store.getters.getGoodsSelected[item.id]"></mt-switch>
                           <img :src="item.thumb_path">
                            <div class="ino">
                                <h1>{{item.title}}</h1>
                                <p>
                                    <span class="price">￥{{item.sell_price}}</span>
                                    <numbox></numbox>
                                    <a href="#" @click.prevent="remove(item.id,index)">删除</a>
                                </p>
                            </div> 
                        </div>
                    </div>
			</div>
        </div>
        <div class="mui-card">
                    <div class="mui-card-content">
                        <div class="mui-card-content-inner jiesuan">
                            <div class="left">
                                   <p>总计(不含运费)</p>
                                     <p>已勾选商品<span class="red">0</span>件，总价:￥<span class="red">0</span></p>
                            </div>
                            <mt-button type="danger" size="small">去结算</mt-button>
                        </div>
                    </div>
                
			</div>

    <p>{{$store.getters.getGoodsSelected}}</p>
    </div>
</template>

<script>
import numbox from "./shopcar_number.vue";
export default {
  data() {
    return {
      goodslist: []
    };
  },
  created() {
    this.getCarList();
  },
  components: {
    numbox
  },
  methods: {
    getCarList() {
      this.goodslist = [
        {
          id: "1",
          title:
            "Apple MacBook Pro 13.3英寸笔记本电脑 银色（2017款Core i5处理器/8GB内存/256GB硬盘 MPXU2CH/A）",
          count: 1,
          sell_price: 2199,
          thumb_path:
            "https://img14.360buyimg.com/n4/jfs/t1/5479/8/3546/70556/5b997c0cE40f64978/6540f1c2a6090257.jpg"
        }
      ];
    },
    remove(id,index){
        this.goodslist.remove(index)
    }
  }
};
</script>

<style lang="scss" scoped>
.shopcar-container {
  background-color: #eee;
  overflow: hidden;
  .goods-list {
    .mui-card-content-inner {
      display: flex;
      align-items: center;
    }
    img {
      width: 60px;
      height: 60px;
    }
    h1 {
      font-size: 13px;
    }
    .price {
      color: red;
      font-weight: bold;
    }
  }
  .jiesuan{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .red{
          color: red;
          font-weight: bold;
          font-size: 16px;
      }
  }
}
</style>
